<template>
  <!-- 数据的展示
    详情跳转（话题详情、问题详情）
    点赞（话题点赞、问题点赞、）
    收藏（话题收藏、回答收藏、 》》回复收藏）
  -->
  <div>
    <div v-if="Object.keys(list).length == 0">
      <animation></animation>
    </div>

    <template v-for="(part, index) in list">
      <div class="contentshow" :key="index">
        <!-- 标题展示判断 -->
        <template>
          <div class="title">
            <span @click="toTopicDetail(index)">{{ part.title }}</span>
          </div>
        </template>
        <!-- <template v-if="part.type == 1">
          <div class="title">
            <span @click="toTopicDetail(1, part.id)">{{ part.title }}</span>
          </div>
        </template> -->
        <!-- <template v-if="part.type == 2">
          <div class="title">
            <span @click="toTopicDetail(2, part.id)">{{ part.title }}</span>
          </div>
        </template>
        <template v-if="part.type == 3">
          <div class="title">
            <span @click="toTopicDetail(2, part.iid, part.id)">{{
              part.title
            }}</span>
          </div>
        </template> -->
        <!-- 展开状态 -->
        <div v-if="part.tag">
          <div class="content" v-html="part.content"></div>
          <div class="createtime">{{ part.createtime }}</div>
        </div>
        <!-- 收起状态 -->
        <div v-else>
          <div class="text">
            {{ part.text }}
            <p
              v-show="!part.tag"
              @click="contentSwitch(index)"
              class="show_hidden"
            >
              展开<i class="el-icon-arrow-down"></i>
            </p>
          </div>
        </div>
        <div class="topiccount">
          <!-- 点赞数 -->
          <div
            v-if="part.praise != null && part.praise.status == 0"
            style="display: inline-block"
          >
            <img
              src="../../assets/img/topicicon/like2.png"
              alt=""
              @click="like(part.id, 1, part.type,index)"
            />
          </div>
          <div v-else style="display: inline-block">
            <img
              src="../../assets/img/topicicon/like1.png"
              alt=""
              @click="like(part.id, 0, part.type,index)"
            />
          </div>
          <p>{{ part.like_num }}</p>
          <!-- 收藏数 -->

          <div v-if="part.type == 1" style="display: inline-block">
            <div
              v-if="
                part.collect_topic != null &&
                part.collect_topic.is_delete == '1'
              "
              style="display: inline-block"
            >
              <img
                src="../../assets/img/topicicon/collect2.png"
                alt=""
                @click="collect(part.id, '0', part.type,index)"
              />
            </div>
            <div v-else style="display: inline-block">
              <img
                src="../../assets/img/topicicon/collect1.png"
                alt=""
                @click="collect(part.id, '1', part.type,index)"
              />
            </div>
            <p>{{ part.collection_num }}</p>
          </div>
          <div v-else-if="part.type == 2" style="display: inline-block">
            <div
              v-if="
                part.collect_issue != null &&
                part.collect_issue.is_delete == '1'
              "
              style="display: inline-block"
            >
              <img
                src="../../assets/img/topicicon/collect2.png"
                alt=""
                @click="collect(part.id, '0', part.type)"
              />
            </div>
            <div v-else style="display: inline-block">
              <img
                src="../../assets/img/topicicon/collect1.png"
                alt=""
                @click="collect(part.id, '1', part.type)"
              />
            </div>
            <p>{{ part.collection_num }}</p>
          </div>
          <img
            @click="part.disShow = !part.disShow"
            src="../../assets/img/topicicon/comment1.png"
            alt=""
          />
          <p @click="part.disShow = !part.disShow" v-show="part.disShow">
            {{ part.discussion_num }} 条评论
          </p>
          <p @click="part.disShow = !part.disShow" v-show="!part.disShow">
            取消评论
          </p>
          <span>浏览量 {{ part.browse_num }}</span>
          <p
            v-show="part.tag"
            @click="contentSwitch(index)"
            class="show_hidden"
          >
            收起<i class="el-icon-arrow-up"></i>
          </p>
        </div>
        <!-- 评论展示 -->
        <div v-if="!part.disShow" class="discussionShow">
          <discussion :id="part.id" :type="part.type"></discussion>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
import { topiclike_num, topiccollent_num } from "../../api/recommend";
import { addHistory_topic, addHistory_issue } from "../../api/history";
import Discussion from "../discussion/Discussion.vue";
import Animation from "../../views/contentshow/Animation.vue";
import { updateissueContention_num } from "../../api/issue";
export default {
  name: "ContentShow",
  components: { Discussion, Animation },
  props: {
    list: {},
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    contentSwitch(index) {
      this.historyAdd(index)

      this.list[index].tag = !this.list[index].tag;
      this.$forceUpdate();
    },
    // 不同类型跳转参数不同
    toTopicDetail(index) {
      this.historyAdd(index)

      let type = this.list[index].type
      let id = this.list[index].id

      // 回答跳转
      if (type == 3) {
        type = 2
        id = this.list[index].iid
      }
      //   console.log("toTopicDetail");
      this.$router.push({
        path: `/topicdetail/${type}/${id}`,
      });
    },
    //修改点赞状态
    like(id, status, type, index) {
      topiclike_num({
        uid: localStorage.getItem("uid"),
        id: id,
        status: status,
        type: type,
      }).then((res) => {
        if (res.code == 200) {
          this.$emit("refreshData", index);
        } else {
          this.$message.error(res.mess);
        }
      });
    },
    // 历史记录添加
    historyAdd(index) {
      console.log("历史记录添加");
      console.log("type" + this.list[index].type);
      if (this.list[index].type == 1) {
        console.log("话题");
        let data = {
          uid: localStorage.getItem("uid"),
          tid: this.list[index].id,
        };
        addHistory_topic(data).then((res) => {console.log(res);});
      }
      if (this.list[index].type == 2) {
        console.log("问题");
        let data = {
          uid: localStorage.getItem("uid"),
          iid: this.list[index].id,
        };
        addHistory_issue(data).then((res) => {console.log(res);});
      }
    },
    //修改收藏状态
    collect(id, is_delete, type, index) {
      if (type == 1) {
        topiccollent_num({
          uid: localStorage.getItem("uid"),
          tid: id,
          is_delete: is_delete,
          type: type,
        }).then((res) => {
          if (res.code == 200) {
            this.$emit("refreshData", index);
          }
        });
      } else if (type == 2) {
        updateissueContention_num({
          uid: localStorage.getItem("uid"),
          iid: id,
          is_delete: is_delete,
          // type:type
        }).then((res) => {
          if (res.code == 200) {
            this.$emit("refreshData", index);
          }
        });
      }
    },
  },
};
</script>
<style scoped>
.contentshow {
  padding: 10px 20px;
  background-color: #fff;
  margin-bottom: 2px;
  color: black;
}
/* 标题 */
.contentshow .title {
  font-size: 20px;
  font-weight: bold;
  margin: 15px 0px 15px 0px;
}
.contentshow .title > span {
  line-height: 35px;
}
.contentshow .title > span:hover {
  color: #409eff;
}
/* 标题 */

/* 展开的内容 */
.contentshow >>> .content {
  padding: 0px 20px;
  /* border: 1px solid black; */
}
.contentshow >>> .content p {
  line-height: 30px;
}
.contentshow >>> .content img {
  display: block;
  width: 60%;
  margin: 0 auto;
}
.contentshow .content >>> .ql-syntax {
  background-color: #23241f;
  color: #eaeae4;
  /* white-space: nowrap; */
  overflow-y: hidden;
  overflow-x: scroll;
  max-width: 650px;
}
.contentshow .createtime {
  padding: 20px 0px 0px 0px;
  color: #8a8a8a;
  font-size: 13px;
}

/* 收起的内容 */
.contentshow .text {
  padding: 0px 10px;
  line-height: 25px;
  /*超出部分隐藏*/
  /* overflow: hidden; */
  /*不换行*/
  /* white-space: nowrap; */
  /*超出部分文字以...显示*/
  /* text-overflow: ellipsis; */
  /* line-clamp: 2; */

  /* text-overflow: -o-ellipsis-lastline;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  vertical-align: middle; */
}

/* 点赞、收藏 */
.contentshow .topiccount {
  margin: 10px 0px 0px 0px;
  font-size: 16px;
  /* text-align: center; */
}
.contentshow .topiccount img {
  width: 22px;
  height: 22px;
  vertical-align: middle;
}
.contentshow .topiccount p {
  display: inline-block;
  margin: 0px 50px 0px 8px;
  vertical-align: middle;
}
.contentshow .topiccount span {
  font-size: 13px;
  color: #747d8c;
}

.contentshow .show_hidden {
  display: inline-block;
  margin: 5px 0px;
  font-size: 15px;
  color: #409eff;
  vertical-align: middle;
}

/* 评论展示 */
.discussionShow {
  margin-top: 20px;
  border-radius: 5px;
  /* border: 1px solid red; */
  /* box-shadow:0px 0px 3px #2f3542; */

  border: none;
  box-shadow: 0 12px 5px -10px rgba(0, 0, 0, 0.2), 0 0 4px 0 rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 12px 5px -10px rgba(0, 0, 0, 0.2),
    0 0 4px 0 rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}
</style>